<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      :root {
          --less-then-768: #0f0;
          --more-then-768: #f00;
      }

      @media screen and (min-width: 768px) {
          body {
              background: var(--less-then-768);
          }
      }

      @media screen and (max-width: 768px) {
          body {
              background: var(--more-then-768);
          }
      }

      body {
          --foo: #0f0;
          --width: 200;
          --margin: 20px;
          padding: 0;
          margin: 0;
      }

      .box {
          --font-size: 32px;
          margin-top: var(--margin);
          width: calc(var(--width) * 2px);
          height: 200px;
          background: var(--foo);
      }

      .box-son {
          font-size: var(--font-size);
      }

      .box-brother {
          font-size: var(--font-size);
      }

      .js-add-variable {
          font-size: var(--js-set);
      }
  </style>
</head>
<body>
<div class="box">
  <div class="box-son">box-son</div>
</div>
<div class="box-brother">
  box-brother
</div>
<div class="js-add-variable">
  js-add-variable
</div>
<script>
  window.onresize = function () {
    console.log(window.innerWidth)
  }
  const body = document.body
  body.style.setProperty('--js-set', '28px')
</script>
</body>
</html>